<html>
<head>
	<title>Paint</title>
	<script type="text/javascript">
	
	function ie_event(e)
	{
		if (e === undefined)
		{ 
			return window.event; 
		};
		return e;
	}

	var Canva = {};

	Canva.init = function(id, width, height)
	{
		var canv = document.getElementById(id);
		canv.width = width;
		canv.height = height;

		this.canvasId = id;
	
		this.ctx = canv.getContext("2d");
		
		this.tool = Pencil;
		this.drawing = false;
	
		canv.onmousedown = function(e)
		{
			var evnt = ie_event(e);
			Canva.tool.start(evnt);
		};
	
		canv.onmouseup = function(e)
		{
			if (Canva.drawing)
			{
				var evnt = ie_event(e);
				Canva.tool.finish(evnt);
			}
		};
	
		canv.onmousemove = function(e)
		{
			if (Canva.drawing)
			{
				var evnt = ie_event(e);
				Canva.tool.move(evnt);
			}
			document.getElementById(Canva.canvasId).style.cursor = 'crosshair';
		};
	};

	var Pencil = {};

	Pencil.start = function(evnt)
	{
		Pencil.x = evnt.clientX;
		Pencil.y = evnt.clientY;
	
		Canva.ctx.beginPath();
   		Canva.ctx.moveTo(Pencil.x, Pencil.y);
    
    	Canva.drawing = true;
	};

	Pencil.finish = function(evnt)
	{	
		Pencil.x = evnt.clientX;
		Pencil.y = evnt.clientY;
		Canva.ctx.lineTo(Pencil.x, Pencil.y);
			
		Canva.drawing = false;
	};

	Pencil.move = function(evnt)
	{	
		Pencil.x = evnt.clientX;
		Pencil.y = evnt.clientY;
		Canva.ctx.lineTo(Pencil.x, Pencil.y);
		Canva.ctx.stroke();
		Canva.ctx.moveTo(Pencil.x, Pencil.y);
	};

	</script>
	
</head>
<body>
<div>
	<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
	Canva.init('canvas', window.innerWidth, window.innerHeight);
</script>
</html>
